<template>
  <div class="uploadImg">
      <div class="fileTitle">
          <span class="title">上传</span>
          <span class="sub" @click="uploadHandle"><i class="el-icon-upload" style="margin-right:2px;"></i>选择上传文件</span>
          <span v-for="(item,idx) in fileList" :key="idx" v-show="fileList.length">{{item.name}}</span>
          <span v-show="!fileList.length">未上传任何文件</span>
      </div>
      <input type="file" ref="inputfile" @change="fileChangeHandle" style="display: none;">
  </div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import api from '@/api/apiPath'
  import Util from '@/common/utils'
  export default {
    name: "upload-img",
    data () {
      return {
          percentage: 0,
          token: '',
          qiniuUrl: '',
          imgUrl: '',
          fileList: [],
          fileUrl: [],
      }
    },
    props: ['value'],
    created () {
        this.axios.post(api.UPLOADTOKEN, {}).then(res => {
            this.token = res.data.data.imgToken
            this.qiniuUrl = res.data.data.qiniuUrl
        })
    },
    watch: {
        value (val) {
            this.imgUrl = val
        }
    },
    methods: {
      uploadHandle () {
          const node = this.$refs.inputfile
          node.click()
          this.fileList = []
          this.fileUrl = []
      },
      fileChangeHandle () {
          const file = this.$refs.inputfile.files[0]
          // 判断文件类型
          const upType = ['apk']
          const fileName = file.name
          const postfix = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length)

          if (upType.indexOf(postfix) === -1) {
              return this.$message({
                  message: '只支持apk格式的文件',
                  type: 'warning'
              })
          }
          this.fileList.push(file);
          this.uploadQiniu(file)
      },
      // 用七牛上传
      uploadQiniu (item) {
          const loading = this.$loading({
              lock: true,
              text: '拼命上传中...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
          });
          const fileName = item.name
          const nameText = fileName.substring(0,fileName.lastIndexOf('.'))
          const postfix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)
          const name = Util.getTimeString2(new Date().getTime()) + Math.ceil(Math.random()*100)
          const token = this.token
          const putExtra = {
              fname: fileName,
              params: {},
              mimeType: null
          }
          const config = {
              useCdnDomain: true
          }
          const observable = qiniu.upload(item, nameText + name + postfix, token, putExtra, config)
          const vueThis = this
          this.percentage = 10
          observable.subscribe(function (res) {
              vueThis.percentage = res.total.percent
          },function (error) {
              console.error('上传失败：', error)
          }, function (res) {
              vueThis.$message({
                  message: '上传成功',
                  type: 'success'
              })
              loading.close()
              vueThis.imgUrl = vueThis.qiniuUrl + res.key
              vueThis.fileUrl.push(vueThis.imgUrl);
          })
          this.$emit('uploadSuccess',this.fileUrl);
    }
  }
}
</script>

<style lang="stylus">
  .uploadImg 
  .type
    width :500px
    .upload
      margin 15px 0
    .fileTitle
      .title 
        font-size :15px
        display :inline-block
        width :100px
      .sub 
        padding: 0px 10px
        font-size 12px
        display inline-block!important
        text-align center
        // margin-left 5px
        cursor pointer
        border: 1px solid #ccc
        // height 20px
        
    ul li 
      list-style none
      .el-icon-delete 
          margin-left 10px
          cursor pointer

    .tishi
      color :rgba(0,0,0,0.5)
      font-size 12px!important
  
</style>
